<template>
    <div class="bigbox" v-show="isListInfo" ref="bigbox">
        <ul class="type">
            <li v-for="(item, i) in arrs" @click="clickType(item.typeId, i)" :class="i == typeIndex ? 'active' : ''">
                {{ item.typeName }}
            </li>
        </ul>
        <ul class="content">
            <li v-for="item in contents" v-slide-in v-show="item">
                <div class="title" @click="goDetail(item.newsId)">{{ item?.title || '' }}</div>
                <div class="item">更新时间：{{ item?.postTime }}</div>
                <div class="item">详情：{{ item?.digest }}</div>
                <div class="imgBox" v-for="src in item?.imgList">
                    <photo-provider :default-backdrop-opacity="0.5">
                        <photo-consumer :inro="item.title" :src="src">
                            <img v-lazy="src" alt="" />
                        </photo-consumer>
                    </photo-provider>
                </div>
                <div class="item">信息来源：{{ item?.source }}</div>
            </li>
            <li class="loadingImg">
                <FLoading1  :duration="2"></FLoading1>
            </li>
        </ul>
        <BackTop :dom="bigbox"></BackTop>
    </div>
    <newDetail v-if="!isListInfo" :newsId="newsId" @backContent="backContent"></newDetail>
</template>

<script setup lang="ts">
import { onMounted, ref, provide, onBeforeUnmount } from 'vue';
import { newsLists, newsTypes } from '@/api/index'
import _ from 'lodash'
import newDetail from './detail.vue'
const isListInfo = ref(true)
const loading = ref(true)
const bigbox: any = ref(null)
const arrs: any = ref([])
const contents: any = ref([])
const typeIndex = ref(0)
const typeId = ref('')
const newsId = ref('')
let page = 1
const backContent = () => {
    isListInfo.value = true
}
// 将方法通过 provide 提供给子组件
provide('backContent', backContent);
const getData = async () => {
    const result = await newsTypes()
    arrs.value = result.data
    setTimeout(() => {
        clickType(arrs.value[0].typeId, 0)
    }, 1000);
}

const clickType = async (id: any, i: number) => {
    page = 1
    contents.value = []
    typeIndex.value = i
    typeId.value = id
    const obj = {
        typeId: typeId.value,
        page: page
    }
    const result = await newsLists(obj)
    contents.value = result.data || []
}

const addMoreContent = async () => {
    loading.value = false
    page++
    const obj = {
        typeId: typeId.value,
        page: page
    }
    const result = await newsLists(obj)
    contents.value = contents.value.concat(result.data)
    loading.value = true
}

const goDetail = (id: any) => {
    isListInfo.value = false
    newsId.value = id
}
// 滚动事件处理函数  
const handleScroll = _.throttle(() => {
    if (bigbox.value) {
        const containerHeight = bigbox.value.scrollHeight;
        const scrollTop = bigbox.value.scrollTop;
        const clientHeight = bigbox.value.clientHeight;
        // 计算滚动条距离底部的距离  
        const scrollDistanceFromBottom = containerHeight - (scrollTop + clientHeight);
        if (scrollDistanceFromBottom <= 50) {
            addMoreContent()
        }
    }
}, 500)
onMounted(() => {
    getData()
    if (bigbox.value) {
        bigbox.value.addEventListener('scroll', handleScroll);
    }
})
onBeforeUnmount(() => {
    if (bigbox.value) {
        bigbox.value.removeEventListener('scroll', handleScroll);
    }
})
</script>

<style lang="scss" scoped>
.bigbox {
    width: 100%;
    height: 100%;
    position: relative;
    overflow-y: auto;
    @include scroll-bar();

    ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
        min-height: 38px;
    }

    .type {
        display: flex;
        flex-wrap: wrap;
        position: sticky;
        top: 0;
        left: 0;
        background-color: var(--backColor);
        z-index: 10;

        li {
            border-radius: 5px;
            margin: 5px;
            padding: 5px;
            border: 1px solid rgba(128, 128, 128, 0.42);
            cursor: pointer;
        }

        .active {
            color: white;
            background-color: var(--themeColor);
        }
    }

    .content {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 10px;

        li {
            padding: 10px;
            box-shadow: 3px 2px 10px rgba(128, 128, 128, 0.268);

            .title {
                cursor: pointer;
                font-size: 18px;
                text-align: center;
                padding: 0 20px;

                &:hover {
                    color: var(--themeColor);
                }
            }

            .item {
                margin: 5px 0;
                padding: 0 10px;
            }

            .imgBox {
                text-align: center;
                overflow: hidden;

                img {
                    cursor: pointer;
                    height: 150px;
                }
            }
        }

        .loadingImg {
            display: flex;
            align-items: center;
            justify-content: center;

            img {
                width: 100%;
            }
        }
    }


}
</style>